import {
    Vue,
    Component,
    Prop,
    Watch,
    Emit,
    Model,
    Inject,
    Provide
} from "vue-property-decorator";
import { Getter, Action, State, Mutation } from "vuex-class";
import G6 from "@antv/g6";
// import { Chrome } from "vue-color";
import "@antv/g6/build/plugin.tool.grid";
import "@antv/g6/build/plugin.layout.dagre";
import "@antv/g6/build/plugin.edge.polyline";
import "@antv/g6/build/plugin.tool.tooltip";
import axios from "axios";
declare let require: any;
//TODO 导入搜索接口
//props的属性一般不需要再在类中进行初始化
@Component({
    components: {
        // ColorPick: Chrome,
        // AddModal: (r: any) => require(["../component/AddModal.vue"], r),
        // AddStepInfo: (r: any) => require(["../component/AddStepInfo.vue"], r)
    }
})
export default class AntvG6 extends Vue {
    //页面数据
    Data: any = {};

    //节点类型配置
    NodeTypeOpts: any = [
        // {
        //   text: "Input",
        //   value: 1
        // },
        // {
        //   text: "Button",
        //   value: 1
        // }
    ];
    //Edge数据配置

    Edge: any = {
        Desc: ""
    };
    //锚点配置
    Anchor: any = [
        [
            0,
            0.5,
            {
                style: "red"
            }
        ],
        [
            0.5,
            0,
            {
                style: "red"
            }
        ],
        [
            1,
            0.5,
            {
                style: "red"
            }
        ],
        [
            0.5,
            1,
            {
                style: "red"
            }
        ]
    ];

    //用作node连接
    NodeLine: string = "";

    //用作Edge删除
    EdgeLine: string = "";

    //直线
    isLine: boolean = false;

    //折线
    isPolyLine: boolean = false;

    //最右侧展示栏
    PropertyBar: string = "画布属性";

    //节点属性
    NodeProperty = {
        ID: "",
        NodeColor: "",
        Size: "",
        NodeType: "",
        Label: {
            Text: "",
            Fill: "white"
        }
    };
    CanvasProperty = {};

    //网格设置
    Grid: any;
    ShowModal = false;

    //页面数据，可用作页面初始化展示
    data: any = {
        nodes: [],
        edges: []
    };

    //Graph基类
    Graph: any;

    //初始化Graph
    initGraph() {
        let Self = this;
        Self.Grid = new G6.Plugins["tool.grid"]({
            type: "line"
        });
        Self.Graph = new G6.Graph({
            container: "mountNode",
            fitView: "autoZoom",
            plugins: [Self.Grid],
            width: 1050,
            height: 800
        });

        /********************监听事件 start************************************* */

        //事件监听

        //拖拽模式下节点移动事件
        // if (this.isDragModel) {
        let node: any;
        let dx: any;
        let dy: any;

        Self.Graph.on("node:dragstart", (ev: any) => {
            const { item } = ev;
            const model = item.getModel();
            node = item;
            dx = model.x - ev.x;
            dy = model.y - ev.y;
        });
        Self.Graph.on("node:drag", (ev: any) => {
            node &&
                Self.Graph.update(node, {
                    x: ev.x + dx,
                    y: ev.y + dy
                });
        });
        Self.Graph.on("node:dragend", (ev: any) => {
            node = undefined;
        });

        //节点点击事件
        Self.Graph.on("node:click", (ev: any) => {
            let NodeID = ev.item.id;
            // console.log(ev);
            // let r = new G6.Node.getAnchorPoints(ev.domX, ev.domY);
            // console.log(r);
            Self.Graph.update(NodeID, {
                stroke: "black"
            });

            //Node连接
            if (this.isLine) {
                this.lineNode(NodeID, "line");
            }
            if (this.isPolyLine) {
                this.lineNode(NodeID, "polyline");
            }

            //切换属性栏
            this.PropertyBar = "节点属性";
            this.NodeProperty.ID = NodeID;
        });

        //edge点击事件
        Self.Graph.on("edge:click", (ev: any) => {
            let EdgeID = ev.item.id;
            this.EdgeLine = EdgeID;
            this.PropertyBar = "Edge属性";
        });

        //edge拖拽事件

        //监听点击事件
        Self.Graph.on("click", (e: any) => {
            if (e.item == null) {
                this.PropertyBar = "画布属性";
            }
        });

        //Anchor监听？
        //箭头连线
        Self.Graph.edge({
            style: {
                endArrow: true
            }
        });

        /***************************注册模型start********************************************* */

        //注册椭圆
        new G6.registerNode("ellipse", {
            getPath: function getPath(item: any) {
                var width = 100;
                var height = 40;
                return G6.Util.getEllipsePath(0, 0, height, 20);
            },
            anchor: this.Anchor
        });

        //注册矩形
        new G6.registerNode("rect", {
            getPath: function getPath(item: any) {
                var width = 100;
                var height = 40;
                return G6.Util.getRectPath(-width / 2, -height / 2, width, height, 20);
            },
            anchor: this.Anchor
        });

        //注册菱形
        new G6.registerNode("rhombus", {
            getPath: function getPath(item: any) {
                var width = 100;
                var height = 40;
                return G6.Util.pointsToPolygon([
                    {
                        x: -50,
                        y: 0
                    },
                    {
                        x: 0,
                        y: 30
                    },
                    {
                        x: 50,
                        y: 0
                    },
                    {
                        x: 0,
                        y: -30
                    }
                ]);
            },
            anchor: this.Anchor
        });

        //注册椭圆节点组
        G6.registerNode("ellipse_group", {
            draw(item: any) {
                const group = item.getGraphicGroup();
                const model = item.getModel();
                group.addShape("circle", {
                    attrs: {
                        x: -100,
                        y: 0,
                        r: 4,
                        fill: "blue"
                    }
                });
                group.addShape("circle", {
                    attrs: {
                        x: 100,
                        y: 0,
                        r: 4,
                        fill: "blue"
                    }
                });
                group.addShape("circle", {
                    attrs: {
                        x: 0,
                        y: 20,
                        r: 4,
                        fill: "blue"
                    }
                });
                group.addShape("circle", {
                    attrs: {
                        x: 0,
                        y: -20,
                        r: 4,
                        fill: "blue"
                    }
                });
                return group.addShape("ellipse", {
                    attrs: {
                        x: 0,
                        y: 0,
                        width: 100,
                        height: 20,
                        color: "red"
                    }
                });
            }
        });
    }
    /*************************方法区*************************************** */

    //创建流图
    createFlow() { }

    nodeSelected() { }

    //拾色器
    pickColor(v: any) {
        // this.DefaultProps = v;
    }

    //添加起始椭圆节点
    addCircle() {
        this.Graph.add("node", {
            x: 150,
            y: 150,
            shape: "ellipse",
            color: "red",
            label: ""
        });
    }

    //添加常规矩形节点
    addRect() {
        this.Graph.add("node", {
            x: 150,
            y: 150,
            shape: "rect",
            color: "red",
            label: ""
        });
    }

    //添加条件菱形节点
    addRhombus() {
        this.Graph.add("node", {
            x: 150,
            y: 150,
            shape: "rhombus",
            color: "red",
            label: ""
        });
    }

    //添加node节点弹窗
    addDom() {
        this.ShowModal = true;
    }

    //修改节点属性
    saveNodeProperty() {
        this.Graph.update(this.NodeProperty.ID, {
            color: "black",
            label: {
                text: this.NodeProperty.Label.Text,
                fill: this.NodeProperty.Label.Fill
            }
        });
    }

    //修改Edge属性
    saveEdgeProperty() {
        this.Graph.update(this.EdgeLine, {
            label: {
                text: this.Edge.Desc,
                fill: "black"
            }
        });
    }

    //删除节点
    delNode() {
        this.Graph.remove(this.NodeProperty.ID);
        this.NodeProperty.ID = "";
    }

    //删除Edge
    delEdge() {
        this.Graph.remove(this.EdgeLine);
        this.EdgeLine = "";
    }

    //连接Node 直线或者折线模式
    lineNode(NodeID: any, LineType: "line" | "polyline") {
        if (this.NodeLine == "") {
            this.NodeLine = NodeID;
        } else if (this.NodeLine != NodeID) {
            this.Graph.add("edge", {
                source: this.NodeLine,
                target: NodeID,
                size: 3,
                color: "red",
                shape: LineType

                //可以指定锚点，不然就是按角度自动获取节点
                // sourceAnchor: 1, // 锚点索引
                // targetAnchor: 0 // 锚点索引
            });
            if (LineType == "line") {
                this.isLine = false;
            }
            if (LineType == "polyline") {
                this.isPolyLine = false;
            }
            this.NodeLine = "";
        } else {
            this.NodeLine = NodeID;
        }
    }

    /***************模式切换**************************************** */

    //直线
    isLineModel() {
        this.isPolyLine = false;
        this.isLine = true;
    }

    //折线
    isPolylineModel() {
        this.isLine = false;
        this.isPolyLine = true;
    }

    //保存数据
    saveAll() {
        this.Data = this.Graph.save();
        console.log(this.Data);
    }
    mounted() {
        this.initGraph();
    }
    created() { }
}